<template>
  <div v-if="getShow" class="modern-login-wrapper">
    <div class="modern-login-container">
      <div class="form-header">
        <h2>{{ t('sys.login.welcomeBack') }}</h2>
      </div>

      <form @submit.prevent="handleLogin" class="floating-form" autocomplete="off">
        <!-- 隐藏假字段，防止自动填充 -->
        <input type="text" style="display: none" autocomplete="username" />
        <input type="password" style="display: none" autocomplete="new-password" />
        <div class="input-group">
          <input
            id="username"
            v-model.trim="formData.account"
            type="text"
            autocomplete="off"
            :name="'account_' + Math.random().toString(36).slice(2)"
            @input="validateInput"
            @focus="handleFocus"
            @blur="handleBlur"
            required
          />
          <label for="username" :class="{ focused: formData.account }">{{ t('sys.login.userName') }}</label>
          <span class="highlight"></span>
        </div>

        <div class="input-group">
          <input
            id="password"
            v-model.trim="formData.password"
            :type="showPassword ? 'text' : 'password'"
            autocomplete="off"
            :name="'password_' + Math.random().toString(36).slice(2)"
            @input="validateInput"
            @focus="handleFocus"
            @blur="handleBlur"
            required
          />
          <label for="password" :class="{ focused: formData.password }">{{ t('sys.login.password') }}</label>
          <span class="highlight"></span>
          <button type="button" class="password-toggle" @click="togglePassword" :class="{ active: showPassword }">
            <EyeOutlined v-if="!showPassword" />
            <EyeInvisibleOutlined v-else />
          </button>
        </div>

        <!-- 验证码 -->
        <div class="input-group captcha-input-group" v-if="showCaptcha">
          <input
            id="captcha"
            v-model.trim="formData.inputCode"
            type="text"
            autocomplete="off"
            @input="validateInput"
            @focus="handleFocus"
            @blur="handleBlur"
            required
          />
          <label for="captcha">{{ t('sys.login.inputCode') }}</label>
          <span class="highlight"></span>
          <div class="captcha-image" @click="handleChangeCheckCode">
            <img v-if="randCodeData.requestCodeSuccess" :src="randCodeData.randCodeImage" alt="验证码" />
            <img v-else src="../../../assets/images/checkcode.png" alt="验证码" />
          </div>
        </div>

        <div class="form-options">
          <label class="remember-me">
            <input type="checkbox" v-model="rememberMe" />
            <span class="checkmark"></span>
            {{ t('sys.login.rememberMe') }}
          </label>
          <a href="#" class="forgot-password" @click.prevent="setLoginState(LoginStateEnum.RESET_PASSWORD)">
            {{ t('sys.login.forgetPassword') }}
          </a>
        </div>

        <button type="submit" class="submit-btn" :disabled="!isFormValid || loading" :class="{ loading: loading }">
          <span v-if="!loading">{{ t('sys.login.loginButton') }}</span>
          <span v-else>{{ t('sys.login.loggingIn') }}</span>
          <LoadingOutlined v-if="loading" class="loading-icon" />
        </button>

        <div class="form-footer">
          <span>{{ t('sys.login.noAccount') }}</span>
          <a href="#" @click.prevent="setLoginState(LoginStateEnum.REGISTER)">
            {{ t('sys.login.registerButton') }}
          </a>
        </div>
      </form>

      <!-- 其他登录方式 -->
      <div class="other-login-methods">
        <div class="divider">
          <span>{{ t('sys.login.otherSignIn') }}</span>
        </div>
        <div class="third-party-login">
          <a @click="setLoginState(LoginStateEnum.MOBILE)" title="手机登录" class="third-party-btn phone">
            <MobileOutlined />
          </a>
          <a @click="onThirdLogin('wechat')" title="微信" class="third-party-btn wechat">
            <WechatFilled />
          </a>
          <a @click="onThirdLogin('qq')" title="QQ" class="third-party-btn qq">
            <QqOutlined />
          </a>
          <a @click="setLoginState(LoginStateEnum.QR_CODE)" title="二维码登录" class="third-party-btn qrcode">
            <QrcodeOutlined />
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { reactive, ref, onMounted, computed, unref, watch, onBeforeUnmount } from 'vue';
  import { useRouter } from 'vue-router';
  import {
    EyeOutlined,
    EyeInvisibleOutlined,
    ExclamationCircleOutlined,
    LoadingOutlined,
    ArrowRightOutlined,
    MobileOutlined,
    QrcodeOutlined,
    QqOutlined,
    WechatFilled,
  } from '@ant-design/icons-vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useUserStore } from '/@/store/modules/user';
  import { LoginStateEnum, useLoginState } from './useLogin';
  import { getCodeInfo } from '/@/api/sys/user';

  const router = useRouter();
  const { t } = useI18n();
  const { createMessage: $message } = useMessage();
  const userStore = useUserStore();
  const { setLoginState, getLoginState } = useLoginState();

  // 控制组件显示
  const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN);

  // 表单数据
  const formData = reactive({
    account: '',
    password: '',
    inputCode: '',
  });

  // 状态管理
  const isFormValid = ref(false);
  const loading = ref(false);
  const rememberMe = ref(false);
  const showPassword = ref(false);
  const showCaptcha = ref(false);

  // 验证码数据
  const randCodeData = reactive({
    randCodeImage: '',
    requestCodeSuccess: false,
    checkKey: '',
  });

  // 第三方登录模态框
  const thirdModalRef = ref();

  let usernameObserver: MutationObserver | null = null;
  let passwordObserver: MutationObserver | null = null;

  // 输入验证
  const validateInput = () => {
    const hasUsername = formData.account.trim().length > 0;
    const hasPassword = formData.password.trim().length > 0;
    const hasCaptcha = !showCaptcha.value || formData.inputCode.trim().length > 0;

    isFormValid.value = hasUsername && hasPassword && hasCaptcha;
  };

  // 处理输入框焦点
  const handleFocus = (event) => {
    const input = event.target;
    const label = input.nextElementSibling;

    // 添加一些炫酷的初始效果
    label.style.transform = 'translateY(-50%) translateX(0) rotate(0deg) scale(1)';
    label.style.opacity = '1';

    // 添加轻微的弹跳效果
    setTimeout(() => {
      label.style.transform = 'translateY(-50%) translateX(0) rotate(0deg) scale(1.05)';
      setTimeout(() => {
        label.style.transform = 'translateY(-50%) translateX(0) rotate(0deg) scale(1)';
        label.classList.add('focused');
      }, 100);
    }, 50);
  };

  // 处理输入框失焦
  const handleBlur = (event) => {
    const input = event.target;
    const label = input.nextElementSibling;

    if (!input.value) {
      // 先设置初始状态（向右移出）
      label.style.transform = 'translateY(-50%) translateX(100px) rotate(15deg) scale(0.8)';
      label.style.opacity = '0';

      // 短暂延迟后播放向左移入动画
      setTimeout(() => {
        label.classList.remove('focused');
        label.style.animation = 'labelSlideIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards';

        // 动画结束后清除样式并添加弹跳效果
        setTimeout(() => {
          label.style.animation = '';
          label.style.transform = '';
          label.style.opacity = '';

          // 添加最终的弹跳效果
          setTimeout(() => {
            label.style.transform = 'translateY(-50%) translateX(0) rotate(0deg) scale(1.1)';
            setTimeout(() => {
              label.style.transform = 'translateY(-50%) translateX(0) rotate(0deg) scale(1)';
            }, 150);
          }, 50);
        }, 600);
      }, 50);
    }
  };

  // 切换密码显示
  const togglePassword = () => {
    showPassword.value = !showPassword.value;
  };

  // 刷新验证码
  const handleChangeCheckCode = () => {
    formData.inputCode = '';
    randCodeData.checkKey = new Date().getTime() + Math.random().toString(36).slice(-4);

    getCodeInfo(randCodeData.checkKey).then((res) => {
      randCodeData.randCodeImage = res;
      randCodeData.requestCodeSuccess = true;
    });
  };

  // 登录处理
  const handleLogin = async () => {
    // XSS 防护
    const xssPattern = /(~|\{|\}|"|'|<|>|\?)/g;
    if (xssPattern.test(formData.account) || xssPattern.test(formData.password)) {
      $message.error(t('sys.login.xssWarning'));
      return;
    }

    try {
      loading.value = true;

      const loginParams: any = {
        password: formData.password,
        username: formData.account,
        mode: 'none' as any,
      };

      // 如果显示验证码，添加验证码参数
      if (showCaptcha.value) {
        loginParams.captcha = formData.inputCode;
        loginParams.checkKey = randCodeData.checkKey;
      }

      const result = await userStore.login(loginParams);

      if (result) {
        $message.success(`${t('sys.login.loginSuccessDesc')}: ${result.userInfo.realname || result.userInfo.username}`, 3);

        // 记住我功能
        if (rememberMe.value) {
          localStorage.setItem('rememberMe', 'true');
          localStorage.setItem('rememberedUsername', formData.account);
        } else {
          localStorage.removeItem('rememberMe');
          localStorage.removeItem('rememberedUsername');
        }
      }
    } catch (error: any) {
      $message.error(error.message || t('sys.api.networkExceptionMsg'));

      // 登录失败时刷新验证码
      if (showCaptcha.value) {
        handleChangeCheckCode();
      }
    } finally {
      loading.value = false;
    }
  };

  // 第三方登录
  const onThirdLogin = (type) => {
    // thirdModalRef.value?.onThirdLogin(type);
    $message.warning('暂未开放');
  };

  // 初始化
  onMounted(() => {
    // 检查是否需要显示验证码
    showCaptcha.value = true;
    handleChangeCheckCode();

    // 检查记住我功能
    const remembered = localStorage.getItem('rememberMe');
    if (remembered === 'true') {
      rememberMe.value = true;
      const rememberedUsername = localStorage.getItem('rememberedUsername');
      if (rememberedUsername) {
        formData.account = rememberedUsername;
      }
    }

    // 自动填充注册信息
    const regUsername = sessionStorage.getItem('register_username');
    const regPassword = sessionStorage.getItem('register_password');
    if (regUsername) formData.account = regUsername;
    if (regPassword) formData.password = regPassword;
    sessionStorage.removeItem('register_username');
    sessionStorage.removeItem('register_password');

    // 延迟同步浏览器自动填充到 formData
    setTimeout(() => {
      const usernameInput = document.getElementById('username') as HTMLInputElement | null;
      const passwordInput = document.getElementById('password') as HTMLInputElement | null;
      if (usernameInput && usernameInput.value) formData.account = usernameInput.value;
      if (passwordInput && passwordInput.value) formData.password = passwordInput.value;
    }, 300);

    validateInput();
  });

  onBeforeUnmount(() => {
    if (usernameObserver) usernameObserver.disconnect();
    if (passwordObserver) passwordObserver.disconnect();
  });

  // 监听 getShow（登录表单显示状态）
  watch(getShow, (show) => {
    if (show) {
      const regUsername = sessionStorage.getItem('register_username');
      const regPassword = sessionStorage.getItem('register_password');
      if (regUsername) formData.account = regUsername;
      if (regPassword) formData.password = regPassword;
      sessionStorage.removeItem('register_username');
      sessionStorage.removeItem('register_password');
    }
  });
</script>

<style scoped lang="less">
  .modern-login-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .modern-login-container {
    width: 100%;
    max-width: 480px;
    border-radius: 24px;
    padding: 48px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    z-index: 1;
    animation: fadeInUp 0.6s ease-out;

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }

  .form-header {
    text-align: center;
    margin-bottom: 40px;

    h2 {
      color: #2c3e50;
      font-size: 32px;
      margin-bottom: 12px;
      font-weight: 700;
      background: linear-gradient(135deg, #667eea, #764ba2);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    p {
      color: #7f8c8d;
      font-size: 16px;
      margin: 0;
    }
  }

  .floating-form {
    .input-group {
      position: relative;
      margin-bottom: 32px;

      input {
        width: 100%;
        padding: 16px 20px;
        border: 2px solid #e1e8ed;
        border-radius: 16px;
        font-size: 16px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        background: rgba(255, 255, 255, 0.9);
        color: #2c3e50;

        &:focus {
          outline: none;
          border-color: #667eea;
          box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
          background: rgba(255, 255, 255, 1);
        }

        &:valid {
          border-color: #27ae60;
        }
      }

      label {
        position: absolute;
        left: 35px;
        top: 50%;
        transform: translateY(-50%);
        background: transparent;
        padding: 0 8px;
        color: #95a5a6;
        font-size: 18px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
        border-radius: 4px;
        font-weight: 400;
        letter-spacing: 0.2px;

        &.focused,
        &:has(+ input:valid) {
          transform: translateY(-50%) translateX(100px) rotate(15deg) scale(0.8);
          opacity: 0;
          animation: labelSlideOut 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
        }

        @keyframes labelSlideOut {
          0% {
            transform: translateY(-50%) translateX(0) rotate(0deg) scale(1);
            opacity: 1;
          }
          25% {
            transform: translateY(-50%) translateX(25px) rotate(-5deg) scale(1.1);
            opacity: 0.8;
          }
          50% {
            transform: translateY(-50%) translateX(50px) rotate(8deg) scale(0.9);
            opacity: 0.6;
          }
          75% {
            transform: translateY(-50%) translateX(75px) rotate(-3deg) scale(0.85);
            opacity: 0.3;
          }
          100% {
            transform: translateY(-50%) translateX(100px) rotate(15deg) scale(0.8);
            opacity: 0;
          }
        }

        @keyframes labelSlideIn {
          0% {
            transform: translateY(-50%) translateX(100px) rotate(-15deg) scale(0.8);
            opacity: 0;
          }
          60% {
            transform: translateY(-50%) translateX(15px) rotate(8deg) scale(1.2);
            opacity: 0.8;
          }
          80% {
            transform: translateY(-50%) translateX(-8px) rotate(-3deg) scale(1.1);
            opacity: 0.9;
          }
          90% {
            transform: translateY(-50%) translateX(3px) rotate(1deg) scale(1.05);
            opacity: 0.95;
          }
          100% {
            transform: translateY(-50%) translateX(0) rotate(0deg) scale(1);
            opacity: 1;
          }
        }

        @keyframes labelFloat {
          0% {
            transform: translateY(-50%) scale(1);
            opacity: 0.7;
          }
          100% {
            transform: translateY(-50%) scale(0.85);
            opacity: 1;
          }
        }
      }

      .password-toggle {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: #95a5a6;
        cursor: pointer;
        padding: 8px;
        border-radius: 8px;
        transition: all 0.3s ease;

        &:hover {
          color: #667eea;
          background: rgba(102, 126, 234, 0.1);
        }

        &.active {
          color: #667eea;
        }
      }
    }
  }

  .captcha-input-group {
    position: relative;

    .captcha-image {
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      width: 100px;
      height: 40px;
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      border: 1px solid #e1e8ed;
      transition: all 0.3s ease;
      z-index: 2;

      &:hover {
        border-color: #667eea;
        transform: translateY(-50%) scale(1.05);
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    input {
      padding-right: 120px !important;
    }

    label {
      z-index: 3;

      &.focused,
      &:has(+ input:valid) {
        z-index: 4;
      }
    }
  }

  .form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;

    .remember-me {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      color: #7f8c8d;
      font-size: 14px;

      input[type='checkbox'] {
        display: none;
      }

      .checkmark {
        width: 18px;
        height: 18px;
        border: 2px solid #e1e8ed;
        border-radius: 4px;
        position: relative;
        transition: all 0.3s ease;

        &::after {
          content: '✓';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: white;
          font-size: 12px;
          opacity: 0;
          transition: opacity 0.3s ease;
        }
      }

      input:checked + .checkmark {
        background: #667eea;
        border-color: #667eea;

        &::after {
          opacity: 1;
        }
      }
    }

    .forgot-password {
      color: #667eea;
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      transition: color 0.3s ease;

      &:hover {
        color: #5a6fd8;
        text-decoration: underline;
      }
    }
  }

  .error-message {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #e74c3c;
    font-size: 14px;
    text-align: center;
    margin-bottom: 24px;
    padding: 12px 16px;
    background: rgba(231, 76, 60, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(231, 76, 60, 0.2);
  }

  .submit-btn {
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 16px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    overflow: hidden;

    &:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
    }

    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
    }

    &.loading {
      .loading-icon {
        animation: spin 1s linear infinite;
      }
    }

    .arrow-icon {
      transition: transform 0.3s ease;
    }

    &:hover:not(:disabled) .arrow-icon {
      transform: translateX(4px);
    }
  }

  .form-footer {
    text-align: center;
    margin-top: 24px;
    color: #7f8c8d;
    font-size: 14px;

    a {
      color: #667eea;
      text-decoration: none;
      margin-left: 4px;
      font-weight: 600;
      transition: color 0.3s ease;

      &:hover {
        color: #5a6fd8;
        text-decoration: underline;
      }
    }
  }

  .other-login-methods {
    margin-top: 32px;

    .divider {
      display: flex;
      align-items: center;
      width: 100%;
      margin: 24px 0;

      span {
        padding: 0 16px;
        font-size: 14px;
        color: #bdc3c7;
        white-space: nowrap;
        background: transparent;
        z-index: 1;
      }

      &::before,
      &::after {
        content: '';
        flex: 1;
        height: 1px;
        background: #e1e8ed;
      }
      &::before {
        margin-right: 8px;
      }
      &::after {
        margin-left: 8px;
      }
    }
    .dark .divider::before,
    .dark .divider::after {
      background: #444a58;
    }

    .login-methods {
      display: flex;
      gap: 12px;
      margin-bottom: 24px;

      .method-btn {
        flex: 1;
        padding: 12px 16px;
        border: 2px solid #e1e8ed;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.8);
        color: #7f8c8d;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;

        &:hover {
          border-color: #667eea;
          color: #667eea;
          background: rgba(102, 126, 234, 0.05);
          transform: translateY(-1px);
        }

        &.mobile:hover {
          border-color: #27ae60;
          color: #27ae60;
          background: rgba(39, 174, 96, 0.05);
        }

        &.qr:hover {
          border-color: #f39c12;
          color: #f39c12;
          background: rgba(243, 156, 18, 0.05);
        }
      }
    }

    .third-party-login {
      display: flex;
      justify-content: center;
      gap: 16px;

      .third-party-btn {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 20px;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        &.phone {
          background: #27ae60;

          &:hover {
            background: #229954;
          }
        }

        &.qq {
          background: #12b7f5;

          &:hover {
            background: #0ea5e9;
          }
        }

        &.wechat {
          background: #07c160;

          &:hover {
            background: #06ad56;
          }
        }

        &.qrcode {
          background: #0089ff;

          &:hover {
            background: #0077e6;
          }
        }
      }
    }
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    .modern-login-container {
      max-width: 400px;
      padding: 32px 24px;
    }

    .form-header h2 {
      font-size: 28px;
    }

    .captcha-input-group {
      .captcha-image {
        width: 80px;
        height: 36px;
      }

      input {
        padding-right: 100px !important;
      }
    }

    .login-methods {
      flex-direction: column;
    }
  }

  @media (max-width: 480px) {
    .modern-login-wrapper {
      padding: 16px;
    }

    .modern-login-container {
      padding: 24px 20px;
    }

    .form-header h2 {
      font-size: 24px;
    }

    .form-header p {
      font-size: 14px;
    }

    .floating-form .input-group input {
      padding: 14px 16px;
      font-size: 14px;
    }

    .submit-btn {
      padding: 14px 20px;
      font-size: 16px;
    }
  }

  // 深色模式支持
  @media (prefers-color-scheme: dark) {
    .modern-login-container {
      background: rgba(44, 62, 80, 0.95);
      border-color: rgba(255, 255, 255, 0.1);
    }

    .form-header h2 {
      color: #ecf0f1;
    }

    .form-header p {
      color: #bdc3c7;
    }

    .floating-form .input-group input {
      background: rgba(52, 73, 94, 0.9);
      border-color: #34495e;
      color: #ecf0f1;

      &:focus {
        background: rgba(52, 73, 94, 1);
      }
    }

    .captcha-input-group {
      .captcha-image {
        border-color: #4a5569;

        &:hover {
          border-color: #667eea;
        }
      }
    }

    .floating-form .input-group label {
      color: #bdc3c7;

      &.focused,
      &:has(+ input:valid) {
        transform: translateY(-50%) translateX(100px) rotate(15deg) scale(0.8);
        opacity: 0;
        animation: labelSlideOut 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
      }
    }

    @keyframes labelSlideIn {
      0% {
        transform: translateY(-50%) translateX(100px) rotate(-15deg) scale(0.8);
        opacity: 0;
      }
      60% {
        transform: translateY(-50%) translateX(15px) rotate(8deg) scale(1.2);
        opacity: 0.8;
      }
      80% {
        transform: translateY(-50%) translateX(-8px) rotate(-3deg) scale(1.1);
        opacity: 0.9;
      }
      90% {
        transform: translateY(-50%) translateX(3px) rotate(1deg) scale(1.05);
        opacity: 0.95;
      }
      100% {
        transform: translateY(-50%) translateX(0) rotate(0deg) scale(1);
        opacity: 1;
      }
    }

    .form-options .remember-me {
      color: #bdc3c7;
    }

    .form-footer {
      color: #bdc3c7;
    }

    .other-login-methods .divider span {
      color: #bdc3c7;
    }

    .login-methods .method-btn {
      background: rgba(52, 73, 94, 0.8);
      border-color: #34495e;
      color: #bdc3c7;
    }
  }

  // 暗色模式下输入框样式，确保聚焦时也是深色背景
  .dark .modern-login-wrapper .input-group input,
  .dark .modern-login-wrapper .input-group input:focus {
    background: #23272f !important;
    color: #fff !important;
    border-color: #444a58 !important;
    box-shadow: none !important;
  }
  .dark .modern-login-wrapper .input-group input:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15) !important;
  }
</style>
